<template>
    <div id="login">

        <div class="log_head">
            <div class="head_left">
                <img src="https://am-cloud.mss.ctc.com/idp/themes/default/images/logo.png" alt="" />
                <span>统一身份认证管理平台</span>
            </div>
            <div class="head_right">
                <h3>保守秘密，人人有责</h3>
            </div>
        </div>
    </div>
     <div class="center">
     </div>
     <div class="shuru" style="position: fixed;top: 50%;left: 50%;width: 400px;">
 <el-input v-model="account" style="width: 360px;height: 40px;" placeholder="人力账号/手机号" />
  <el-input
    v-model="password"
    style="width: 360px;margin-top: 24px;height: 40px;"
    type="password"
    placeholder="密码"
    show-password
  />
     <p>
         <el-button type="primary" @click="jumpToTargetView">登录</el-button>
     </p>
     </div>
     <div class="buttom">
        <h3>
            中国电信版权所有
        </h3>
     </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
// import {LogoutAPI} from "../request/index";




import {useRouter} from 'vue-router'


const router = useRouter()

const account = ref("");
let password = ref("");
// let res = LogoutAPI();



const jumpToTargetView = () => {
    // console.log("111");
    
   
  router.push({
   name:'TheWelcome'
  })

}


</script>

<style lang="scss" scoped>
#login {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.log_head {
    
    width: 1200px;
    height: 80px;
    display: flex;
    justify-content: space-between;
}
.head_left {
    width: 400px;
    height: 80px;
    line-height: 80px;
    justify-content: space-between;
}
.head_left span {
    color: #0085d0;
    margin-left: 32px;
    height: 80px;
    float: left;
    font-size: 20px;
    font-family: "microsoftYaHei";
}
.head_left img{
    float: left;
    margin-top: 20px;
}
.head_right{
    color: red;
}
.center{
    display: flex;
    background: url("https://am-cloud.mss.ctc.com/idp/themes/default/images/login_mainbg.jpg") no-repeat center top;
     width: 100%;
   height: 540px;
    background-size: cover;
}
.buttom{
    display: flex;
    justify-content: center;
}
</style>
